import React, { useEffect, useState } from 'react';
import { List, Button } from 'antd-mobile';
import { useNavigate,useParams } from 'react-router-dom';
import axios from 'axios';
import './conindex.css'
import StatusTag from '../StatusTag';
const ConsultationList = () => {
  const navigate = useNavigate();
  const [huilist, sethuilist] = useState([]);
  const consultations=[
    {
      _id: '1',
      patientName: '张三',
      age: 45,
      department: '心内科',
      status: 'pending',
      expectedTime: '2024-01-20',
      desc: '心绞痛，需要进一步诊断',
      datetime:'2024-01-21'
    },
    
      {
        _id: '2',
        patientName: "李四",
        age: 38,
        department: "神经内科",
        status: "approved",
        expectedTime: "2024-02-15",
        desc: "头痛伴有眩晕，初步诊断为偏头痛",
        datetime:'2025-01-21'

      },
      {
        _id: '3',
        patientName: "王五",
        age: 52,
        department: "骨科",
        status: "rejected",
        expectedTime:"2024-03-05",
        desc: "腰椎间盘突出，建议物理治疗",
        datetime:'2024-03-6'

      },
      {
        _id: '4',
        patientName: "赵六",
        age: 29,
        department: "消化内科",
        status: "pending",
        expectedTime: "2024-04-10",
        desc: "慢性胃炎，需胃镜检查确认",
        datetime:'2024-11-21'

      }
  ]

  const gethuilist = () => {
    axios.get('http://localhost:3000/huan/Huilist').then((res) => {
      const huis = [...consultations, ...res.data.list].flat();
      sethuilist(huis);
    });
  };

  const tiao=(_id)=>{
    navigate(`/layout/consultation/edit?_id=${_id}`)
  }
  useEffect(() => {
    gethuilist();
  }, []);

  // Separate the description rendering into its own component
  const renderDescription = (item) => (
    <>
      <div className="patient-info">
        <span>{`${item.age}岁 | ${item.department}`}</span>
        <StatusTag status={item.status} />
      </div>
      <div className="desc-text">{item.desc}</div>
      <div className="date-time">
        <span className="medical-icon">📅</span>
        预期时间: {item.expectedTime}
      </div>
    </>
  )

  return (
    <div className="medical-page">
    <Button
      style={{width:334,margin:'0 auto',marginTop:20}}
      color="primary"
      block
      onClick={() => navigate('/layout/consultation/new')}
    >
      申请会诊
    </Button>

    <List header="会诊列表">
      {huilist.map(item => (
        <List.Item
          key={item._id}
          onClick={() => tiao(item._id)}
          title={item.patientName}
          description={renderDescription(item)}
        />
      ))}
    </List>
  </div>
  );
};

export default ConsultationList;